import './css/index.css';
let data = [
  {
    id: 1,
    name: 'iPhone 15',
    price: 5999,
  },
  {
    id: 2,
    name: 'iPhone 15 Pro',
    price: 7999,
  },
  {
    id: 3,
    name: 'iPhone 15 Pro Max',
    price: 8999,
  },
];

console.log(data);
let btn = document.querySelector('button');

let box = document.querySelector('.box');
let table = document.createElement('table');
let tr = document.createElement('tr');
box.append(table);
table.append(tr);
table.setAttribute('border', '1');
table.setAttribute('cellspacing', '0');
table.setAttribute('width', '250');
for (let i = 0; i < data.length; i++) {
  let th = document.createElement('th');
  tr.append(th);
}

let newTh = document.querySelectorAll('th');
console.log(newTh);
let newTd = document.querySelectorAll('td');
console.log(newTd);
newTh[0].append(document.createTextNode('id'));
newTh[1].append(document.createTextNode('name'));
newTh[2].append(document.createTextNode('price'));
btn.onclick = function () {
  for (let i = 0; i < data.length; i++) {
    let tr2 = document.createElement('tr');
    table.append(tr2);
    for (let j = 0; j < data.length; j++) {
      let td2 = document.createElement('td');
      tr2.append(td2);
    }
  }
  let newTd2 = document.querySelectorAll('td');
  data.forEach(function (value, index) {
    console.log(value.id);
    newTd2[index * 3].append(value.id);
    console.log(index);
    newTd2[index * 3 + 1].append(value.name);
    newTd2[index * 3 + 2].append(value.price);
  });
};

let btn2 = document.querySelectorAll('button')[1];

btn2.onclick = function () {
  let input = document.querySelectorAll('input');
  console.log(table);
  let newTr = document.createElement('tr');
  console.log(newTr);
  table.append(newTr);
  for (let i = 0; i < 3; i++) {
    let newTd = document.createElement('td');
    console.log(newTd);
    newTr.append(newTd);
    newTd.append(document.createTextNode(input[i].value));
  }
};
